<template>
    <div v-wechat-title="VueTitle">
        <div class="main-content-wrap clearfix">
            <div class="w-1200 clearfix">
                
                <div class="actCenter">
                    <h2 class="public-title">活动中心
                        <div class="tab">
                            <a href="javascript:void(0)" :class="{'active' : index == menuIndex}" v-for="(item, index) in menuData" :key="index" @click="changeMenu(item.type, index)">{{item.name}}</a>
                        </div>
                    </h2>
                    <div v-if="loading" class="contentLoad">
                        <Spin fix size="large"></Spin>
                    </div>
                    <template v-else>
                        <template v-if="actListData.length">
                            <div class="list-wrapper clearfix">
                                <ul>
                                    <li v-for="(item,index) in actListData" :key="index">
                                        <div class="item-wrap">
                                            <a href="javascript:void(0);" @click="links(item.act_url)">
                                                <span class="status" :class="item.is_underway == 1 ? 'underway' : item.is_underway == 2 ? 'ended' : ''">{{item.is_underway == 1 ? '进行中' : item.is_underway == 2 ? '已结束' : ''}}</span>
                                                <div class="act-banner">
                                                    <img :src="imgRequest+item.act_banner_pic_pc" alt="">
                                                    <div class="expired" v-if="item.is_underway == 2"></div>
                                                </div>
                                                <div class="act-info">
                                                    <h4 class="c-red">{{item.act_title}}</h4>
                                                    <p v-if="item.is_underway == 2">已结束</p>
                                                    <p v-else>{{item.act_end_date}} 结束</p>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div class="page-wrapper">
                                <Page :total="pageCount" @on-change="pageData(page, type)" :current.sync="page"></Page>
                            </div>
                        </template>
                        <div v-else class="noContent"></div>
                    </template>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
export default {
    data() {
        return {
            VueTitle: "活动中心", //页面标题
            loading: false,
            isUnderway: '', //活动状态：0.未开始 1.进行中 2.已结束
            menuIndex: 0, //tab菜单索引
            menuData: [ //tab菜单
                { name:'全部活动', type: -1 },
                { name:'进行中', type: 1 },
                { name:'已结束', type: 2 },
            ],
            defaultData: [],
            actListData: [],
            pageCount: 10, //分页数*10
            page: 1,
            type: -1,
            onePage: 10, //每页显示数
        };
    },
    created() {
        if (!localStorage.getItem("token")) {
            this.$Modal.warning({
            content: '您还未登录，请先登录',
            scrollable: true,
            onOk: () => {
                var vm = this;
                setTimeout(() => {
                vm.$router.push({path:'/login'});
                }, 1000);
            }
            });
            return false;
        }
        this._getFetchActList(this.type);
    },
    mounted() {

    },
    methods: {
        changeMenu(type, index) {
            let vm = this;
            if (vm.loading) {
                return
            }
            vm.menuIndex = index;
            vm.page = 1;
            vm._getFetchActList(type);
        },
        links(url) {
            if(!JSON.parse(localStorage.getItem('isUser'))){
                this.$Message.warning('游客暂无权限，请先注册会员')
                return
            }
            window.open(url) // + '?app=0'区分砸金蛋活动APP没有抽奖次数不显示去充值、去投注按钮
        },
        pageData(page, type) { //每页显示数据
            let vm = this
            let start = (page - 1) * vm.onePage
            let end = page * vm.onePage
            if (type == -1) {
                vm.actListData = vm.defaultData.slice(start, end)
            } else {
                vm.actListData = vm.newActList.slice(start, end)
            }
        },
        _getFetchActList(type) {
            let vm = this
            vm.type = type
            var params = {
                token: localStorage.getItem("token"),
                is_all: 1,
                // page: vm.page
            };
            vm.loading = true;
            vm.$http.post(vm.urlRequest + "?m=api&c=actcenter&a=fetchActList", params).then(res => {
                vm.loading = false;
                if (res.data.status == 0) {
                    vm.defaultData = res.data.data;
                    if (type == -1) {
                        vm.actListData = vm.defaultData;
                    } else {
                        vm.newActList = [];
                        for (var i=0; i<vm.defaultData.length; i++) {
                            if (vm.defaultData[i].is_underway == type) {
                                vm.newActList.push(vm.defaultData[i]);
                                vm.actListData = vm.newActList
                            }
                        }
                    }
                    vm.pageNum();
                    vm.pageData(vm.page, type);
                } else {
                    vm.$Message.success(res.data.ret_msg);
                }
            }).catch(err => {
				vm.loading = false;
				console.log(err)
			})
        },
        pageNum() { //分页数
            let vm = this;
            let len = vm.actListData.length;
            let integer = parseInt(len / vm.onePage);
            if (len % vm.onePage != 0) {
                vm.pageCount = (integer + 1) * 10
            } else {
                vm.pageCount = integer * 10
            }
        },
    },
    watch: {

    },
};
</script>
<style scoped>
.contentLoad .ivu-spin-fix {
    width: 100%;
    height: 650px;
    position: relative;
    background: none;
}
.noContent {
    height: 570px;
    background: url('../../assets/images/no-content.png') no-repeat center;
}
.actCenter {
    min-height: 680px;
}
.actCenter .public-title {
    margin-bottom: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
    height: 66px;
    line-height: 30px;
    border-bottom: 1px solid #e7e7e7;
}
.actCenter .public-title .tab {
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}
.actCenter .public-title .tab a {
    margin-left: 15px;
    line-height: 30px;
    font-size: 16px;
    color: #48484c;
}
.actCenter .public-title .tab a:hover,
.actCenter .public-title .tab .active {
    position: relative;
    color: #F3596A;
}
.actCenter .public-title .tab .active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #F3596A;
    border-radius: 10px;
}
.list-wrapper ul li {
    float: left;
    width: 50%;
    height: auto;
}
.list-wrapper ul li .item-wrap {
    position: relative;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.13);
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.list-wrapper ul li:nth-child(odd) .item-wrap {
    margin: 10px 10px 10px 0;
}
.list-wrapper ul li:nth-child(even) .item-wrap {
    margin: 10px 0 10px 10px;
}
.list-wrapper ul li:hover .item-wrap {
    transform:translate(0,-8px);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.2);
}
.list-wrapper ul li .item-wrap .status {
    display: block;
    z-index: 2;
    position: absolute;
    top: 8px;
    right: -4px;
    width: 70px;
    height:44px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-weight: bold;
    /* background: url('../../assets/images/active-state.png') no-repeat; */
}
.list-wrapper ul li .item-wrap .underway {
    background-position: -142px 0;
}
.list-wrapper ul li .item-wrap .notstart {
    background-position: -71px 0;
}
.list-wrapper ul li .item-wrap .ended {
    background-position: 0 0;
}
.list-wrapper .act-banner {
    position: relative;
    width: 100%;
    height: 210px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.list-wrapper .act-banner img {
    width: 100%;
    min-height: 210px;
    transition: .5s;
}
.list-wrapper ul li:hover .act-banner img {
    transform: scale(1.05);
}
.list-wrapper .act-banner .expired {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
}
.list-wrapper .act-info {
    position: relative;
    padding: 10px 15px;
    height: 50px;
    line-height:30px;
}
.list-wrapper .act-info h4 {
    float: left;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.list-wrapper .act-info p {
    float: right;
    font-size: 14px;
    color: #999;
}

.page-wrapper {
	margin: 20px 0;
	width: 100%;
	text-align: center;
}
</style>


// WEBPACK FOOTER //
// src/components/activityCenter/activityCenter.vue